<template>
  <div class="charts-container" style="width: 100%;height: 100%" ref="container"></div>
</template>

<script>

import * as echarts from 'echarts'
import theme from '@/components/EChart/theme/theme.json'
import chinaMap from '../../configuration/common/china.json'
import { _deepClone } from '@/utils'

let areaOption = {
  xAxis: [],
  yAxis: [],
  tooltip: {
    trigger: 'axis'
  },
  grid: [],
  series: []
}

export default {
  name: 'Map',
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    resize: {
      default: () => ('')
    },
    renderer: {
      type: String,
      default: () => 'canvas'// canvas缩放时会模糊   svg缩放不会模糊
    }
  },
  data() {
    return {
      instance: null// echarts实例
    }
  },
  components: {},
  watch: {
    option: {
      handler: function() {
        this.renderECharts()
      },
      deep: true
    },
    resize: function() {
      this.chartResize()
    }
  },
  methods: {
    initEChart() {
      // alert()
      let devicePixelRatio = window.devicePixelRatio + 1
      this.instance = echarts.init(this.$refs.container, theme, { devicePixelRatio, renderer: this.renderer })

      this.instance.on('click', event => {
        this.$emit('chartClick', event)
      })
    },
    renderECharts() {
      this.$nextTick(() => {
        if (this.instance) this.instance.clear()
        //地图配置项
        if (this.option.mapOption) {
          this.instance.setOption(this.option.mapOption)
        }
        //柱图配置项
        if (this.option.barOption) {
          this.renderBarEcharts()
        }
      })
    },

    renderBarEcharts() {
      let { barOption, data, left, top } = this.option,
          option = _deepClone(areaOption)
      if (data.length) {
        let maxValue = data[0].value
        echarts.util.each(data, (item, idx) => {
          if(!item.value) return
          let coord = this.instance.convertToPixel('geo', item.coord)
          idx += ''
          option.xAxis.push({
            ...barOption.xAxis[0],
            id: idx,
            gridId: idx,
            name: item.name,
            data: [item.tooltipFieldName]
          })

          option.tooltip.formatter = (p) => {
            return `${item.name}<br/>
                          ${item.tooltipFieldName ? (item.tooltipFieldName + ': ' + (p[0].value ? p[0].value : 0)) : ''}`
        }
          option.yAxis.push({
            ...barOption.yAxis[0],
            id: idx,
            gridId: idx
          })
          option.grid.push({
            ...barOption.grid[0],
            height: 60 / maxValue * item.value,
            id: idx,
            left: coord[0] - left,
            top: coord[1] - 60 / maxValue * item.value,
          })
          option.series.push({
            ...barOption.series[0],
            id: idx,
            xAxisId: idx, // 使用的x轴的id
            yAxisId: idx, // 使用的y轴的id
            data: [item.value] // 柱子数据
          })
        })
        this.instance.setOption(option)
      }
    },

    chartResize() {
      this.$nextTick(() => {
        if (this.instance) this.instance.resize()
      })
    }
  },
  mounted() {

    echarts.registerMap('china', chinaMap)
    this.initEChart()
    this.renderECharts()
    let that = this
    window.addEventListener('resize', () => {
      that.instance.resize()
    })
  }
}
</script>

<style scoped lang="scss">

.charts-container {
  width: 100%;
  height: 100%;
}
</style>

<style lang="scss">
.custom-tooltip-container {
  display: flex;
  flex-direction: column;
}

.custom-tooltip-item {
  display: flex;
  align-items: center;
}

.custom-tooltip-item-content {
  display: block;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 4px;
}
</style>
